<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/3/31
  Time: 22:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>图书在线借阅系统</title>
    <link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="lib/layui/css/book.css">
    <script type="text/javascript" src="lib/layui/layui.js"></script>
    <script type="text/javascript" src="lib/js/jquery-3.4.1.js"></script>
    <style>
        .layui-layout-body {
            background: url("lib/Images/bg-4.jpg") no-repeat;
            background-size: cover;
        }
        .layui-elem-field {
            font-weight: bolder;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-container-box" style="width:90%;background: url(lib/Images/bg.jpg )">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>图书类型信息表</legend>
    </fieldset>

    <div class="demoTable" >

        <label style="font-size: 15px; margin-left: 20px; font-weight: bold;">请输入类型名：</label>
        <div class="layui-input-inline">

            <input class="layui-input" name="search" id="search" lay-verify="required" autocomplete="off" style="width: 130px;" />
        </div>
        <button class="layui-btn" id="searchBtn"  data-type="reload" style="margin-left: 2px;">搜索</button>


    </div>




    <table class="layui-hide" id="bookType-list" lay-filter="bookType-list" ></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
</body>
</html>
<script type="text/javascript">
    layui.use(['dropdown', 'util', 'layer', 'table','form'],function () {
        var dropdown = layui.dropdown
            ,util = layui.util
            ,layer = layui.layer
            ,table = layui.table
            ,$ = layui.jquery;
        var form = layui.form;



        //输入框判空
        $("#searchBtn").click(function(){
            var $ = layui.$;
            var key = $("#search").val();
            console.log(key);

            if(key==''){

                alert("请输入内容查询！");
                return;

            }else{
                var $ = layui.$, active = {
                    reload:function () {
                        //搜索框
                        var search=$('#search').val();
                        console.log(search);


                        //执行重载
                        table.reload('testReload',{
                            url:'bookType.let?type=selectBookType&search='+search,
                            page:{
                                curr:1 //重新从第1页开始
                            },
                            where:{

                            }
                        },'data');
                    }
                };
                $('.demoTable .layui-btn').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });


            };
        });




        table.render({
            elem:'#bookType-list',
            url:'bookType.let?type=query',//数据接口
            title:'图书类型信息表',
            page:true,//开启分页
            limit:5,
            limits: [5, 10],
            cols:[[//表头
                {field:'id',title:'图书类型ID',sort:true,fixed:"left"},
                {field:'tname',title:'图书类型名'},
                {field:'right', title: '操作', toolbar:"#barDemo"}
            ]],
            id:'testReload'
        });
        table.on('tool(bookType-list)',function (obj) {
            var data = obj.data;
            if (obj.event == 'edit'){
                window.location.href = "bookType.let?type=modifypre&id=" + data.id;
            } else if (obj.event == 'del'){
                layer.confirm('确定删除该条数据吗？', function(index){
                    window.location.href = "bookType.let?type=remove&id=" + data.id;
                    layer.close(index);
                });
            }
        })
    });
</script>


